<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery Filter 3</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				// :first-child获取每个父元素的第一个子元素
				$('li:first-child').css('color', 'green');

				// :last-child获取每个父元素的最后一个子元素
				$('li:last-child').css('color', 'red');
				
				// :only-child获取只有一个子元素的元素
				$('li:only-child').css('color', 'orange');	
				
				// :nth-child(odd/even/eq(index))获取每个自定义子元素的元素(索引值从1 开始计算)	
				$('li:nth-child(even)').css('background', '#ccc');
				$('li:nth-child(3n)').css('font-weight', 'bold');// 应用CSS样式到索引为3或3的倍数的元素
				$('li:nth-child(3n + 1)').css('font-size', '25px');// 应用CSS样式到索引为(3+1)或(3的倍数+1)的元素, 中间间隔两个元素
			});	
		</script>
		</head>
	<body>
		<ul>
			<li class="red">Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 6</li>
		</ul>
		
		<ul>
			<li>Another Item 1</li>
			<li>Another Item 2</li>
			<li>Another Item 3</li>
			<li>Another Item 4</li>
			<li>Another Item 5</li>
			<li>Another Item 6</li>
		</ul>
		
		<ul>
			<li>Single Item</li>
		</ul>
	</body>
</html>